<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="bodyinfo">
          <div class="infoaddb">课程管理</div>

          <div class="buttons">
            <div>
              <el-button @click="dialogFormVisible = true">添加课程</el-button>
            </div>
          </div>
          <!-- 添加弹框 -->
          <el-dialog title="添加课程" v-model="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules">
              <el-form-item label="课程名称">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="收费模式">
                <el-radio-group v-model="ruleForm.pricetype">
                  <el-radio label="按课时收费" checked></el-radio>
                  <el-radio label="按期收费"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="单价">
                <el-input v-model="ruleForm.price">元/课时</el-input>
              </el-form-item>
              <el-form-item label="上课模式">
                <el-radio-group v-model="ruleForm.mode">
                  <el-radio label="一对一"></el-radio>
                  <el-radio label="集体班"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="infoAdds()">确 定</el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 修改弹框 -->
          <el-dialog title="修改课程" v-model="dialogFormedit">
            <el-form :model="ruleForm" :rules="rules">
              <el-form-item label="课程名称">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="收费模式">
                <el-radio-group v-model="ruleForm.pricetype">
                  <el-radio label="按课时收费" checked></el-radio>
                  <el-radio label="按期收费"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="单价">
                <el-input v-model="ruleForm.price">元/课时</el-input>
              </el-form-item>
              <el-form-item label="上课模式">
                <el-radio-group v-model="ruleForm.mode">
                  <el-radio label="一对一"></el-radio>
                  <el-radio label="集体班"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="formedit()">修改</el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 弹框end -->
          <div class="infosaa">
            <div class="infosa">
              <div class="infoa">
                <div class="classInfoa">
                  <div>
                    <input
                      type="text"
                      placeholder="请输入课程名称"
                      v-model="queryInfo.name"
                    />
                  </div>
                  <div class="searcha" @click="getItemList">
                    <i class="el-icon-search"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="name"
              width="300px"
              label="课程名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="pricetype"
              width="300px"
              label="收费模式"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="price"
              width="300px"
              label="单价"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="mode"
              width="300px"
              label="上课模式"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip>
              <template #default="scope">
                <div v-show="showa == 1">
                  <el-button
                    type="primary"
                    round
                    size="mini"
                    @click="
                      dialogFormedit = true;
                      edit(scope.row.id);
                    "
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    round
                    size="mini"
                    @click="deletea(scope)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="queryInfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      // 验证
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      ruleForm: {
        name: "",
        pricetype: "",
        price: "",
        mode: "",
      },
      queryInfo: {
        page: 1,
        psize: 5,
        name: "",
      },
      total: 0,
      showa: "2",
      dialogFormedit: false,
      dialogFormVisible: false,
      form: {
        name: "",
      },
      formdata: {
        username: "",
      },
      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
      formInline: {
        user: "",
        region: "",
      },
      urriculumInfos: [],
    };
  },
  created() {
    this.getItemList();
  },
  methods: {
    // 添加
    async infoAdds() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.ruleForm
      );
      // console.log(res);
      if (res.errCode == 10000) {
        this.$message.success("添加成功");
      } else {
        this.$messae.error("添加失败");
      }
      this.dialogFormVisible = false;
      this.getItemList();
    },
    // 分页
    handleSizeChange(val) {
      this.queryInfo.psize = val;
      this.getItemList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      this.getItemList();
      // console.log(`当前页: ${val}`);
    },
    // 删除
    async deletea(currInfo) {
      const deletets = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (deletets !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const currId = currInfo.row.id;
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/delete?id=" + currId
      );
      if (res.errCode == 10000) {
        this.$message.success("删除成功");
      }
      this.getItemList();
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    //  获取课程管理列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list",
        { params: this.queryInfo }
      );
      this.total = res.data.counts;
      this.tableData = res.data.list;
      this.dialogFormedit = false;
      // console.log(this.sou);
      // console.log(res);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改赋值
    edit(id) {
      // 把当前点击修改的id赋值给当前弹框表单的id为了让系统知道修改的哪条数据
      this.ruleForm.id = id;
      this.tableData.forEach((item) => {
        // console.log(item);
        // 如果当前点击列表的id与列表n条数据中的id相匹配
        if (id == item.id) {
          // 就把修改弹框里的数据赋值到当前修改的表格上
          this.ruleForm.name = item.name;
          this.ruleForm.pricetype = item.pricetype;
          this.ruleForm.price = item.price;
          this.ruleForm.mode = item.mode;
        }
      });
    },
    // 执行修改
    async formedit() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.ruleForm
      );
      // console.log(res);
      if (res.errCode == 10000) {
        this.$message.success("修改成功");
      } else {
        this.$messae.error("修改失败");
      }
      this.getItemList();
    },
  },
});
</script>
<style>
.body {
  display: flex;
}

.bodyinfo {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0;
}
.buttons {
  line-height: 50px;
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.infoaddb {
  width: 100px;
  height: 50px;
  background-color: rgb(246, 249, 250);
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 14px;
}

.block {
  margin-left: 15px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
.infosa {
  width: 25%;
}
.classInfoa {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 30px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfoa div:nth-child(2) {
  line-height: 30px;
}
.classInfoa > div > input {
  padding-left: 15px;
}
.searcha {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
}
.infoa {
  display: flex;
  flex-direction: row;
  width: 450px;
  align-items: center;
  margin-top: 10px;
  margin-left: 30px;
}
.infosaa {
  width: 25%;
}
</style>